<template>
  <div>
        <div class="side_header">
          <van-sidebar v-model="activeKey" @click="setarct">
            <van-sidebar-item title="食品"/>
            <van-sidebar-item title="服饰"/>
            <van-sidebar-item title="饰品"/>
            <van-sidebar-item title="家纺"/>
            <van-sidebar-item title="家具"/>
            <van-sidebar-item title="电器"/>
            <van-sidebar-item title="电子"/>
            <van-sidebar-item title="运动"/>
            <van-sidebar-item title="汽车"/>
            <van-sidebar-item title="海淘"/>
            <van-sidebar-item title="其他"/>
          </van-sidebar>
        </div>

        <div class="tab_header">
          <van-tabs v-model="active" @click="setarct">
            <van-tab title="文章" ></van-tab>
            <van-tab title="图片" ></van-tab>
          </van-tabs>
        </div>
    <div class="spec_con">
      <router-view to="/imgloder"></router-view>
    </div>

  </div>

</template>

<script>
export default {
  name: "Special",
  data() {
    return {
      active: 0,
      activeKey: 0
    }
  },
  methods:{
    setarct(){
      if (this.active !== 0){
          this.$router.push('/imgloder')
      } else {
        this.$router.push('/hello')
      }
    }
  }
}
</script>

<style scoped>
.tab_header {
  width: 8rem;
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 2rem;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  background-color: #ffffff;
}

.side_header {
  width: 2rem;
  z-index: 1;
  top: 0px;
  position: fixed;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  background-color: #ffffff;
}
.van-sidebar{
  width: 2rem;
  height: 16.5rem;
}
.spec_con{
  top: 80px;
  left: 90px;
  position: fixed;
}

</style>
